<template>
  <CommonPanel title="考勤数据">
    <template #opt>
      <div>
        数据时间 2022/10/08 (昨天)
      </div>
    </template>
    <div class="content-box1">
      <div class="content-box1_bottom">
        <div class="echart-box">
          <CommonChart ref="myChart" :option="option" />
        </div>
        <div class="connent-box">
          <div class="connent-box_top">
            正常考勤人数
          </div>
          <div class="connent-box_bottom">
            请教人数
          </div>
          <div class="connent-box_bottom">
            异常考勤人数
          </div>
        </div>
      </div>
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from 'echarts';
import { computed, watch } from "vue";
import { ref, onMounted } from "vue";
import { useStore } from "@/store";
import { defineEmits } from "vue";
const emits = defineEmits(["childEvent"]);
const btnList = ref([
  {
    name: "今日",
  },
  {
    name: "近一周",
  },
  {
    name: "近一月",
  },
]);
const myChart = ref(null);




const option = computed(() => {
  return {
    title: [{
      text: '应考勤人数',
      x: 'center',
      top: '54%',
      textStyle: {
        color: '#9BA3AE',
        fontSize: 10,
        fontWeight: '100',
      }
    }, {
      text: '80%',
      x: 'center',
      top: '35%',
      textStyle: {
        fontSize: '20',
        color: '#FCE598',
        fontFamily: 'Lato',
        foontWeight: '600',
      },
    }],
    polar: {
      radius: ['74%', '80%'],
      center: ['50%', '50%'],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(66, 66, 66, .3)',
        },
        data: [80],
        coordinateSystem: 'polar',

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#F9C65A'
            }, {
              offset: 1,
              color: '#815326'
            }]),
          }
        }

      },
    ]
  };
});
</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;
  flex-direction: column;

  &_top {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #9BA3AE;

    span {
      font-weight: 600;
      font-size: 24px;
      color: #65E3F8;
    }
  }

  &_bottom {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    &>div {
      width: 50%;
    }
    .echart-box{
      height: 100%;
    }
    .connent-box {
      flex: 1;
      padding: 0px 50px;
      // height: 50%;
      border-left: 1px solid #6c6c6d;

      &_top {

        background-image: linear-gradient(164deg, rgba(10, 71, 102, 0.65) 0%, rgba(26, 48, 64, 0.3) 100%);
        box-shadow: 1px 1px 1px rgba(19, 47, 64, 0.51), 1px 1px 1px #7397b0 inset;
      }

      &_bottom {
        margin-top: 20px;
        background-image: linear-gradient(164deg, rgba(102, 48, 10, 0.65) 0%, rgba(64, 45, 26, 0.30) 100%);
        box-shadow: 1px 1px 1px rgba(64, 41, 19, 0.51), 1px 1px 1px rgba(176, 142, 115, 1) inset;
      }

      &>div {
        color: #fff;
        width: 100%;
        height: 28px;
        border-radius: 14px;
        padding: 0 15px;
        line-height: 28px;
      }
    }

  }
}

// ::v-deep {
//   .content-box {
//     width: 50% !important;
//   }
// }
</style>
